<template>
  <div class="view-container">
    <header-module
      :left-custom="true"
      :padding="true"
    >
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            代理 {{ formData.agentName }}
          </span>
          <!--
          <el-tag
            type="warning"
            size="small"
          >
            {{ getLabel('agent_status',formData?.agentStatus) }}
          </el-tag>
          -->
        </div>
      </template>
      <template #btn>
        <el-button
          class="border-btn"
          size="small"
          @click="handlBack"
        >返回</el-button>
      </template>
    </header-module>
    <div class="main-content">
      <item-title title="基本信息" />
      <el-form
        v-if="formData.agentType == 'agent'"
        :inline="true"
        label-position="right"
        label-width="140px"
        size="small"
        class="filter-form-inline"
      >
        <el-row style="margin-left: 0px;margin-right:0px;">
          <el-col :span="8">
            <el-form-item
              label="代理商编号："
              style="width: 100%;"
            >
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="代理商名称："
              style="width: 100%;"
            >
              <span>{{ formData.agentName || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="统一社会信用代码："
              style="width: 100%;"
            >
              <span>{{ formData.creditCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="代理商状态："
              style="width: 100%;"
            >
              <span v-if="formData.tradeStatus == 1">正式代理商</span>
              <span v-else>准代理商</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="所在地区："
              style="width: 100%;"
            >
              <span>{{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="详细地址："
              style="width: 100%;"
            >
              <span>{{ formData.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系人："
              style="width: 100%;"
            >
              <span>{{ formData.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系电话："
              style="width: 100%;"
            >
              <span>{{ formData.tel }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="创建人："
              style="width: 100%;"
            >
              <span>{{ formData.creatorName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="创建时间："
              style="width: 100%;"
            >
              <span>{{ dateFormat('yyyy-mm-dd',formData.createdAt) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form
        v-else
        :inline="true"
        label-position="right"
        label-width="100px"
        size="small"
        class="filter-form-inline"
      >
        <el-row style="margin-left: 0px;margin-right:0px;">
          <el-col :span="8">
            <el-form-item
              label="兼职编号："
              style="width: 100%;"
            >
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="兼职名称："
              style="width: 100%;"
            >
              <span>{{ formData.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="兼职级别："
              style="width: 100%;"
            >
              <span>{{ getLabel('agent_level',formData.agentLevel) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="兼职状态："
              style="width: 100%;"
            >
              <span v-if="formData.tradeStatus == 1">正式兼职</span>
              <span v-else>准兼职</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="详细地址："
              style="width: 100%;"
            >
              <span>{{ formData.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="性别："
              style="width: 100%;"
            >
              <span>{{ formData.sex == 1 ? '男' : '女' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系电话："
              style="width: 100%;"
            >
              <span>{{ formData.tel }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="身份证号："
              style="width: 100%;"
            >
              <span>{{ formData.cardNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="创建人："
              style="width: 100%;"
            >
              <span>{{ formData.creatorName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="创建时间："
              style="width: 100%;"
            >
              <span>{{ dateFormat('yyyy-mm-dd',formData.createdAt) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <item-title title="资质信息" />
      <filesUploadView
        v-if="formData.agentType==='agent'"
        ref="refFile"
        :list="formData.businessLicenseFiles"
        disabled
      />
      <filesUploadView
        v-else
        ref="refFile"
        :list="formData.cardFiles"
        disabled
      />
    </div>
  </div>
</template>

<script>
import { inject, onMounted, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'AgentDetail',
  setup() {
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    var data = reactive({
      formData: {},
    })

    // 返回
    const handlBack = () => {
      router.go(-1)
    }

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data
        }
      })
    }

    const succsess = () => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    }

    //* *****************
    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id)
      }
    })
    //* *****************
    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      succsess,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
